<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script>
      const myAxios = axios.create({
        baseURL: "http://gmall-h5-api.atguigu.cn/",
        timeout: 9999,
      });

      /* 
        请求拦截器的失败函数进入条件
          1. 条件1
            - 首先设置请求拦截器use方法的第三个参数option对象的synchronous属性为true(打开同步)
            - 当请求拦截器的成功回调中,如果出现了异常信息被抛出,则直接进入失败的回调函数中

          2. 条件2
            - 假设有两个请求拦截器,分别是拦截器1 和 拦截器2,拦截器1先执行,拦截器2后执行
            - 如果拦截器1中的成功函数返回了失败的promise实例,则拦截器2的失败的回调函数会执行
            - 总结:2的失败回调就是为了处理1的成功回调中抛出失败

      */
      myAxios.interceptors.request.use(
        (config) => {
          // throw new Error("请求拦截器成功函数报错!!!!");
          console.log("第一个请求拦截器成功函数的config打印", config);
          // return Promise.reject("第一个拦截器成功函数返回失败的promise实例");
          return config;
        },
        (error) => {
          console.log("第一个请求拦截器失败函数的error打印", error);
          return Promise.reject("第一个请求拦截器错误");
        },
        {
          synchronous: false,
        }
      );

      myAxios.interceptors.request.use(
        (config) => {
          // throw new Error("请求拦截器成功函数报错!!!!");
          console.log("第二个请求拦截器成功函数的config打印", config);
          // return Promise.reject("第一个拦截器成功函数返回失败的promise实例");
          return config;
        },
        (error) => {
          console.log("第二个请求拦截器失败函数的error打印", error);
          return Promise.reject("第二个请求拦截器错误");
        },
        {
          synchronous: false,
        }
      );

      /* 
        响应拦截器的失败函数进入条件:
          - 请求已经发送到服务器,但是在服务器没有得到预想的结果
          - 比如:超时 服务器宕机(5XX) 找不到数据(4XX)等等
      
      */
      myAxios.interceptors.response.use(
        (response) => {
          console.log(1111);
          console.log("第一个响应拦截器成功函数的response打印", response);
          return response;
        },
        (error) => {
          console.log("第一个响应拦截器失败函数的error打印", error);
          return Promise.reject("第一个响应拦截器错误");
        }
      );
      myAxios.interceptors.response.use(
        (response) => {
          console.log(222);
          console.log("第一个响应拦截器成功函数的response打印", response);
          return response;
        },
        (error) => {
          console.log("第一个响应拦截器失败函数的error打印", error);
          return Promise.reject("第一个响应拦截器错误");
        }
      );

      const oBtn = document.getElementById("btn");

      oBtn.onclick = async function () {
        try {
          const result = await myAxios.get("/api/product/getBaseCategoryList");
          console.log(result, "result");
        } catch (e) {
          console.log("在异常处理中的错误信息打印", e);
        }
      };
    </script>
  </body>
</html>
